querySelector 与 css 选择器入门
说明
本文作者 cxxjackie
由于常有新手用不好 querySelector，翻了一下论坛似乎缺少这方面的教程，那就我自己写一个吧。
以下我会列出几种常用的选择器，注意，不是所有，如果你想学习更详尽的 css 语法，应该去翻阅更详细的文档，本文主要面对的是新手入门。
类选择器与 id 选择器
用 class 和 id 来匹配元素，即 .class 和 #id 的形式，这是最常见的两种选择器。
类型选择器
以元素的类型来匹配，比如 div、input、body 等等。
属性选择器
匹配元素的某个属性，要用方括号括起来，举个简单的例子：[name="btn"]，即匹配 name 为 btn 的元素。
属性选择器也可以实现类选择器与 id 选择器的效果，或者说这 2 种选择器是属性选择器的简写形式。
等号右边的引号可以省略。
在一些特殊情况下，右边的引号不可省，比如：[style="display: none;"]，
由于右边的属性值包含特殊字符（冒号和空格），省略引号会出错，
如果你没有把握，建议任何情况下都不省略引号。
等号和右边的属性值可以不加，如[id]，这种情况下会匹配所有包含 id 这个属性的元素。
属性选择器的正则写法
把等号换成别的符号以实现模糊匹配，记住这 3 个就够了：
| 匹配符号 | 作用 |
|---|---|
^= | 匹配开头 |
$= | 匹配结尾 |
*= | 匹配中间 |
比如本论坛的登录窗口，用户名那个输入框的 id 是 username_XXXXX，后面是随机字符，要匹配这个元素就可以写成：[id^="username_"]。
其他还有 ~= 和 |=，不过不太常用。
为避免记忆混乱可不做了解。
子代选择器
匹配元素的子元素，注意与下面的后代选择器区分，示例：body>div。
> 号的左右可以加空格，也可以不加，一般加上去会让选择器的结构看起来更清晰，但也可能造成语义上的混淆（与后代选择器相比），加不加看个人习惯。
后代选择器
匹配元素后代的所有元素，即不仅包含子元素，也包含子元素的子元素，示例：body div。
由于空格通常指的是后代选择器，所以 css 中是不能随便加空格的。
子代和后代选择器可以连起来使用，实现从上到下精确定位。
通配符选择器
即 *，匹配所有元素，一般与其他选择器结合使用，比如选中 body 的所有子元素就可以写成：body>*。
大多数情况下，*号可以省略，保留*号一般是出于语义上的考虑。
document.querySelectorAll('*')可以选中页面的所有元素，在这种用法下，*号不可省略。
:nth-child() 选择器
可以用来表示该元素是其兄弟元素中的第几个，例如：
<body>
<span></span>
<div>选我选我</div>
<div></div>
</body>
由于这个 div 是第二个子元素，所以写成：body>div:nth-child(2)。
:nth-child 与 子代/后代选择器的结合使用，基本可以选中任意元素。
:nth-child 还有 an+b 的用法，更多用法可以参考 MDN。
:not() 选择器
匹配括号内选择器的反选，比如 :not(.class1) 将匹配所有类名中不包含 class1 的元素。
括号内只能填入一个选择器，填入逗号分隔的多个选择器是实验性的用法，为避免兼容问题不建议使用，可以将多个:not并列使用来实现相同效果。
选择器的并列
多个选择器并列使用时（中间不加任何符号），匹配的元素必须符合所有规则，用于提高匹配精度，比如这样：div.class1[title][name]。
注意元素 class 中间的空格代表多个类名，而类选择器一次只匹配一个类名。
这是新手常犯的错误，要匹配完整类名应该并列使用多个类选择器。
例如：class="class1 class2"，选择器应该写成：.class1.class2。
选择器的合并
在多个选择器之间加逗号，可用于匹配多个元素。
在 css 中，这种写法可以将多个相同效果合并，比如：
.class1 {
display: none;
}
.class2 {
display: none;
}
可以合并为
.class1,
.class2 {
display: none;
}
其选择器应该为 .class1,.class2